<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器{群组+派生}</title>
		<style>
			/* 选择器: 群组选择器---选择所有选择器选中的元素 */
			/* 语法: 元素选择器,类选择器,id选择器 */
			p,div,#table,dl{
				width: 200px;
				height: 200px;
				background: #55ff7f;
			}
			/* 派生选择器: 后代选择器---选中父元素下的所有子元素 */
			/* 语法: [父]元素选择器 [子]元素选择器 */
			ul li{
				width: 100px;
				height: 100px;
				background: #a2afff;
				
			}
		</style>
	</head>
	<body>
		<ul>
			<li>优香</li>
			<li>小桃</li>
			<li>小绿</li>
			<li>爱丽丝</li>
			<li>柚子</li>
		</ul>
		
		<hr />
		<!-- 块元素: 特点: 可以设置宽高 独占一行 -->
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque repellendus assumenda quas impedit temporibus soluta ex deleniti architecto explicabo sapiente, neque iste vitae esse sint aliquid? Deleniti harum officia et.</p>
		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente expedita cumque nisi. Ea error iure sit commodi asperiores magnam consequuntur numquam eos itaque alias adipisci illum quae, voluptatibus consectetur? Blanditiis!</div>
		<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, facilis! Ut illo fugit ad vero recusandae. Perspiciatis rem sunt asperiores, quibusdam, quos, cupiditate at tempore tempora similique dolor culpa nisi.</h2>
		<table id="table">
			<tr>
				<td>lorem</td>
				<td>lorem</td>
			</tr>
			<tr>
				<td>lorem</td>
				<td>lorem</td>
			</tr>
		</table>
		<dl class="dl">
			<dt>图</dt>
			<dd>解释图</dd>
		</dl>
	</body>
</html>